


$(function () {
  // 1 发送请求 显示文章分类数据渲染页面
  // /admin/category/list
  function getCategorytList() {
    // $.get("") // token  headers

    $.get("/admin/category/list", function (res) {
      // 获取数据
      const list = res.data;
      // 拼接模版
      const html = template("trTpl", { list });
      // 渲染模版 
      $(".category_table tbody").html(html);
    })

  }


  // 2 新增-分类-保存
  $(".btn_opt_add").click(function () {
    // 2.1 获取表单的数据 
    const name = $("input[name='name']").val().trim();
    const slug = $("input[name='slug']").val().trim();

    if (!name || !slug) {

      layer.msg('名称和别名不能为空');
      // 弹出提示用户 
      return;
    }


    // 2.2 发送请求
    $.post("/admin/category/add", { name, slug }, function (res) {
      // 恭喜用户
      layer.msg('新增成功');

      // 2.3 清空表单
      $("input[name='name']").val("");
      $("input[name='slug']").val("");

      // 2.4 关闭模态框  bootstrap 
      $("#myModal").modal("hide");

      // 2.5 获取最新的数据
      getCategorytList();
    })


  })





  // 3 编辑 
  // 动态生成的数据 
  // 事件委托！！ 

  // 3.1 通过js的方式来显示 模态框
  // 3.2 获取被点击按钮的身上的属性 data-id data-item
  // 3.3 将数据 设置到 模态框中 
  $(".category_table").on("click", ".edit", function () {
    // 3.1 通过js的方式来显示 模态框
    $("#editModal").modal("show");
    // 3.2 获取被点击按钮的身上的属性 data-id data-item

    const item = $(this).data("item");

    // 3.3 将数据 设置到 模态框中 
    $("#name").val(item.name);
    $("#slug").val(item.slug);
    $("#editModal").data("id", item.id);// 排除法。。。。。
  })

  // 4 编辑模态框-保存 
  $(".btn_opt_edit").click(function () {

    // 4.1 获取表单的内容
    const params = {
      name: $("#name").val(),
      slug: $("#slug").val(),
      id: $("#editModal").data("id")
    };

    // 4.2 发送请求 完成 编辑
    $.post("/admin/category/edit", params, function (res) {

      layer.msg('编辑成功');

      // 4.3 清空表单
      $("#name").val("");
      $("#slug").val("");
      $("#editModal").data("");


      // 4.4 关闭 编辑 模态框
      $("#editModal").modal("hide");

      // 4.5 发送 渲染最新数据
      getCategorytList();

    })




  })

  // 5 删除按钮
  $(".category_table").on("click", ".delete", function () {
    // 5.1 先弹出窗口询问用户  是否要删除 
    layer.confirm("您确定删除吗", { title: "提示" }, (index) => {
      // 5.2 获取被删除的数据 id 
      const id = $(this).data("id");
      // 5.3 拼接参数 发送给后台 完成删除
      $.post("/admin/category/delete", { id }, function (res) {
        // 5.4 删除成功了  获取最新数据
        getCategorytList();
        // 5.5 关闭询问框
        layer.close(index);
      })

    })

  })

  // 1 发送请求 显示文章分类数据渲染页面
  getCategorytList();
})